/**
 * Created by Daniel on 2017/12/19.
 */
$(function(){
    var $key = $('#keyPic');  // file name    eg: the file is image.jpg,but $key='a.jpg', you will upload the file named 'a.jpg'
    var $userfile = $('#userfilePic');  // the file you selected

    // upload info
    var $selectedFile = $('.selected-file-pic');
    var $progress = $(".progress-pic");
    var $uploadedResult = $('.uploaded-result-pic');

    function guid() {
        function S4() {
            return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
        }
        return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
    }

    $("#userfilePic").change(function() {  // you can ues 'onchange' here to uplpad automatically after select a file
        $uploadedResult.html('');
        var selectedFile = $userfile.val();
        if (selectedFile) {
            // randomly generate the final file name
            var ramdomName = guid() + $userfile.val().match(/\.?[^.\/]+$/);
            $key.val(ramdomName);
            $selectedFile.html('文件：' + selectedFile);
        } else {
            return false;
        }
        var f = new FormData(document.getElementById("testformPic"));
        $.ajax({
            url: 'http://upload.qiniu.com/',  // Different bucket zone has different upload url, you can get right url by the browser error massage when uploading a file with wrong upload url.
            type: 'POST',
            data: f,
            processData: false,
            contentType: false,
            xhr: function(){
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload){
                    myXhr.upload.addEventListener('progress',function(e) {
                        // console.log(e);
                        if (e.lengthComputable) {
                            var percent = e.loaded/e.total*100;
                            $progress.html('上传：' + e.loaded + "/" + e.total+" bytes. " + percent.toFixed(2) + "%");
                        }
                    }, false);
                }
                return myXhr;
            },
            success: function(res) {
                console.log("成功：" + JSON.stringify(res));
                var str = '<span>已上传：' + res.key + '</span>';
                var downUrl = res.key;
                mini.get("coverPic").setValue(downUrl);
                $uploadedResult.html(str);
            },
            error: function(res) {
                console.log("失败:" +  JSON.stringify(res));
                $uploadedResult.html('上传失败：' + res.responseText);
            }
        });
        return false;
    });
});